<template>
<div class="container">
    <a-tabs default-active-key="1" forceRender>
        <a-tab-pane key="1">
            <span slot="tab">
                <a-icon type="form" />
                {{$t('overseas.b')[0]}}
            </span>
            <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" class="resourceForm">
                <a-form-model-item required :label="$t('index.handerform')[0]" prop="projectName">
                    <a-input v-model="form.projectName" />
                </a-form-model-item>
                <a-form-model-item required :label="$t('index.handerform')[1]" prop="projectType">
                    <a-radio-group v-model="form.projectType">
                        <a-radio value="1">
                            海外项目
                        </a-radio>
                        <a-radio value="2">
                            大型地面电站
                        </a-radio>
                        <a-radio value="3">
                            工业商业屋顶
                        </a-radio>
                        <a-radio value="4">
                            互动屋顶
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item required :label="$t('index.handerform')[2]" prop="area">
                    <a-input v-model="form.area" />
                </a-form-model-item>
                <a-form-model-item required :label="$t('index.handerform')[3]" prop="capacity">
                    <a-input v-model="form.capacity" />
                </a-form-model-item>
                <a-form-model-item :label="$t('index.handerform')[4]" prop="resourceDescription">
                    <a-input v-model="form.resourcedescription" type="textarea" />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" class="btnsGroup">
                    <a-button type="primary" @click="onSubmit" :loading='loading'>
                        {{$t('btns.a')[8]}}
                    </a-button>
                    <a-button style="margin-left: 10px;" @click="resetForm" :loading='loading'>
                        {{$t('btns.a')[9]}}
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </a-tab-pane>
        <a-tab-pane key="2">
            <span slot="tab">
                <a-icon type="snippets" />
                {{$t('overseas.b')[1]}}
            </span>
            <a-table :columns="columns" :data-source="tableData" :pagination='{current:pageNo,total:total,pageSize:10,showTotal:(total)=>`总计:${total}条`}' style="wdith:100%" width="100%">
                <span slot="customTitle">
                    <a-icon type="smile-o" /> Name</span>
                <span slot="billstatus" slot-scope="text">
                    <a-tag v-if="text==1" color='geekblue'>
                        审核中
                    </a-tag>
                    <a-tag v-else-if="text==2" color='green'>
                        审核成功
                    </a-tag>
                    <a-tag v-else-if="text==3" color='volcano'>
                        审核失败
                    </a-tag>
                    <a-tag v-else color='geekblue'>
                        {{text?text:'审核中'}}
                    </a-tag>
                </span>
            </a-table>
            
        </a-tab-pane>
    </a-tabs>
</div>
</template>

<script>
const data = [{
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
import {
    getResourceApi,
    createResourceApi
} from "~/assets/js/api";
export default {
    components: {},
    props: {
        propE: {
            type: Object,
            default: function () {
                return {
                    message: 'hello'
                }
            }
        }
    },
    data() {
        return {
            columns: [

                {
                    title: this.$t('index.handerform')[0],
                    dataIndex: "billno",
                    key: "billno",
                },
                {
                    title: this.$t('index.handerform')[0],
                    dataIndex: "project",
                    key: "project",
                    slots: {
                        title: 'customTitle'
                    },
                    scopedSlots: {
                        customRender: 'name'
                    },
                },
                {
                    title: this.$t('index.handerform')[1],
                    dataIndex: "projecttype",
                    key: "projecttype",
                },
                {
                    title: this.$t('index.handerform')[2],
                    dataIndex: "area",
                    key: "area",
                },
                {
                    title: this.$t('index.handerform')[3],
                    dataIndex: this.$t('index.handerform')[3],
                    dataIndex: "capacity",
                    key: "capacity",
                },
                {
                    title: this.$t('index.handerform')[4],
                    dataIndex: this.$t('index.handerform')[4],
                    dataIndex: "resourceDescription",
                    key: "resourceDescription",
                    scopedSlots: {
                        customRender: 'tags'
                    },
                },
                {
                    title: '审核状态',
                    dataIndex: this.$t('index.handerform')[3],
                    dataIndex: "auditresult",
                    key: "auditresult",
                    scopedSlots: {
                        customRender: 'billstatus'
                    },
                },

                {
                    title: '创建时间',
                    dataIndex: this.$t('index.handerform')[3],
                    dataIndex: "createtime",
                    key: "createtime",
                },
            ],
            tableData: data,
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 14
            },
            other: '',
            loading: false,
            form: {
                projectName: "",
                projectType: '',
                area: "",
                capacity: '',
                resourceDescription: ''
            },
            rules: {
                region: [{
                    required: true,
                    message: 'Please select Activity zone',
                    trigger: 'change'
                }],
            },
            total:1,
            pageNo:1
        };
    },
    watch: {},
    computed: {},
    methods: {

        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.creatResource()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        getResource(data) {
            getResourceApi({
                //auditresult:1,
                pageNo: this.pageNo,
                pageSize: 10
            }).then((res) => {
                console.log(res, 'res')
                this.tableData = res.data.rows || []
                this.total= res.data.totalCount||0
            }).catch((err) => {
                console.log(err, 'err')
            })
        },
        creatResource(data) {
            this.loading = true
            createResourceApi(this.form).then((res) => {
                this.$message.info(res.message || '报备成功!');
                this.loading = false;
                this.$refs.ruleForm.resetFields();
                this.getResource()
            }).catch((err) => {
                console.log(err, 'err')
                //this.$message.error(err);
                this.loading = false;
            })
        },
    },
    created() {},
    mounted() {
        this.getResource()
    }
};
</script>

<style lang="less" scoped>
.container {
    font-family: '微软雅黑', sans-serif;
    // display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 60px;
    
    min-width: 800px;
    flex-basis:800
}

.resourceForm {
    text-align: left;
}

.btnsGroup {
    text-align: center;
}
</style>
